<template>
  <div class="page-adPlace">
    <a-table
      :columns="columns"
      :data-source="state.adList"
      :loading="state.loading"
      :scroll="{ x: 1500 }"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'image'">
          <a-tooltip
            v-if="record.image"
            overlayClassName="banner-tooltip"
            :overlayStyle="{ height: '350px', borderRadius: '3px' }"
            color="#fff"
            placement="leftTop"
          >
            <template #title>
              <div class="w-[188px] h-[334px]">
                <img style="width: 100%; height: 100%" :src="baseUrl + record.image" alt="" />
              </div>
            </template>
            <a href="javascript:;" class="banner-tooltip-text"> <file-image-outlined />广告位置示意图 </a>
          </a-tooltip>
          <span v-else>-</span>
        </template>
        <template v-if="column.key === 'id'"> {{ record.id || '-' }} </template>
        <template v-if="column.key === 'position'"> {{ record.position || '-' }} </template>
        <template v-if="column.key === 'count'"> {{ record.count || '-' }} </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, inject } from 'vue'
import { placeColumn } from './dataSource'
import type { SlidePlaceData } from '@/types/advertising/slideAd'
import apis from '@/apis'
const {
  advertising: { position }
} = apis

const baseUrl: any = inject('baseUrl')
const columns = ref(placeColumn)
const state = reactive<{ loading: boolean; adList: SlidePlaceData[] }>({
  loading: false,
  adList: [] as SlidePlaceData[]
})

//获取广告位列表接口
const getPlaceList = () => {
  state.loading = true
  // 更新列表接口
  position({ adv_type: 4 })
    .then((res: any) => {
      console.log('res: ', res)
      state.adList = res.list
      state.loading = false
    })
    .catch(() => {
      state.loading = false
    })
}

defineExpose({ getPlaceList })
</script>
<style lang="less" scoped>
@basicColor: #0083ff;

:deep(.ant-form-item-label) {
  width: 80px;
  text-align: right;
}
.ant-tooltip {
  min-width: 187.5px;
  width: 187.5px;
  height: 333.87px;
}
.ant-input-number {
  width: 226px;
}

.ant-input-group-wrapper {
  width: 226px;
}

:deep(.ant-form-item-label > label::after) {
  content: '';
}

.page-adPlace {
  padding-top: 6px;
  box-sizing: border-box;

  :deep(.ant-table-thead > tr > th) {
    color: #262626;
    font-weight: 500;
  }

  :deep(
      .ant-table-thead
        > tr
        > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not(
          [colspan]
        )::before
    ) {
    width: 0;
  }

  :deep(.ant-table-cell .ant-table-cell-with-append) {
    display: flex;
    align-items: center;
  }

  :deep(.ellipsis-text) {
    max-width: 154px !important;
    white-space: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .basicColor {
    color: @basicColor;
  }
}
</style>
